<template>
	<view>
		<!--轮播图-->
		<view class='re-swiper'>
			<u-swiper :list="swiperList" indicator indicatorMode="line" circular height='308rpx'></u-swiper>
		</view>
		<!--新上好课-->
		<view class='re-new'>
			<view class='new-title'>
				<view class='new-title-name'>新上好课</view>
				<view class='new-title-more'>查看更多</view>
			</view>
			<view class='new-list'>
				<view class='new-list-item' v-for='item in newList' :key='item.id' @click="details(item.id)">
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ courseType( item.courseLevel) }}</view>
						<view class='new-item-total'>
							<view class='new-item-price' v-if="item.discountPrice=0">
								<view>免费</view>
							</view>
							<view class='new-item-price' v-else>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--推荐好课-->
		<view class='recommend'>
			<view class='new-title recommend-title'>
				<view class='new-title-name'>推荐好课</view>
				<view class='new-title-more'>查看更多</view>
			</view>
			<view>
				<scroll-view scroll-x="true" class='nav-bar'>
					<view class='nav-bar-wrap'>
						<block v-for='item in reList' :key='item.id'>
							<view class='nav-bar-item'>
								<view class='nav-bar-item-img'>
									<image :src="item.courseCover"></image>
								</view>
								<view class='nav-bar-item-main'>
									<view class='nav-bar-item-type'>{{courseType( item.courseLevel)}} · {{courseNumber(item.purchaseCounter)}}人报名</view>
									<view class='nav-bar-item-price' v-if="item.discountPrice==0">
										<view class='nav-bar-item-oprice'>免费</view>
									</view>
									<view class='nav-bar-item-price' v-else>
										<view class='nav-bar-item-oprice'>¥{{item.discountPrice}}</view>
										<view class='nav-bar-item-pprice'>¥{{item.salePrice}}</view>
									</view>
									<view class='nav-bar-item-pricetxt'>限时优惠</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 大家都在看 -->
		<view class="re-lo">
			<view class='new-title'>
				<view class='new-title-name'>大家都在看</view>

			</view>
			<view class='new-list'>
				<view class='new-list-item' v-for='item in courseList' :key='item.id'>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{courseType( item.courseLevel) }}</view>
						<view class='new-item-total'>
							<view class='new-item-price' v-if="item.discountPrice==0">
								<view>免费</view>
							</view>
							<view class='new-item-price' v-else>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getSliders} from '@/api/home.js'
	import {mostNew,mostHeat} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		mixins:[mixin],
		props:{
			courseList:{
				type:Array,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				swiperList: [],
				newList: [],
				reList: []
			}
		},
		mounted() {
			//查询轮播图
			getSliders().then(res => {
				this.swiperList = res.list.map(v => v.imageUrl);
			})
			//查询新上好课
			mostNew({
				pageNum: 1,
				pageSize: 3
			}).then(res => {
				this.newList = res.pageInfo.list;
			})
			//查询推荐课程
			mostHeat({
				pageNum: 1,
				pageSize: 6
			}).then(res => {
				this.reList = res.pageInfo.list;
			})
			
		},
		methods:{
			//进入课程详情页
		    details( id ){
				uni.navigateTo({
					 url:`/pages/details/details?id=${id}`
			         })
			  }      
		}
	}
</script>

<style>
	.re-swiper {
		padding: 14rpx;
	}

	/deep/ .u-swiper__indicator {
		right: 20rpx;
	}

	.re-new {
		padding: 14rpx;
	}

	.new-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 40rpx;
	}

	.new-title-name {
		font-size: 40rpx;
		font-weight: 400;
		color: #333333;
	}

	.new-title-more {
		font-size: 26rpx;
		font-weight: 400;
		color: #A0A4AD;
	}

	.new-list-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.new-list-item:after {
		content: '';
		position: absolute;
		bottom: -20rpx;
		margin-top: 40rpx;
		width: 100%;
		border-bottom: 1px solid #000000;
		opacity: 0.15;
	}

	.new-item-img {
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}

	.new-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.new-item-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 186rpx;
		padding-left: 23rpx;
	}

	.new-item-title {
		font-size: 29rpx;
		font-weight: 400;
		color: #191919;
	}

	.new-item-type {
		font-size: 24rpx;
		font-weight: 400;
		color: #C5C5C5;
	}

	.new-item-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-item-price {
		display: flex;
		font-size: 21rpx;
		color: #FF4B5C;
		font-weight: 600;
	}

	.new-item-number {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
	}

	.new-item-discountPrice {
		padding-left: 21rpx;
	}

	.recommend {
		padding-top: 40rpx;
	}

	.recommend-title {
		padding: 14rpx;
	}

	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0px !important;
		height: 0px !important;
	}

	.nav-bar-wrap {

		display: flex;
		flex-flow: column wrap;
		height: 634rpx;
	}

	.nav-bar-item {
		width: 265rpx;
		height: 286rpx;
		margin-top: 28rpx;
		margin-left: 17rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
		border-radius: 12rpx;
	}

	.nav-bar-item-img {
		width: 265rpx;
		height: 160rpx;
		border-radius: 12rpx;
		background-color: red;
	}

	.nav-bar-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.nav-bar-item-main {
		padding: 12rpx;
	}

	.nav-bar-item-price {
		display: flex;
		padding: 4rpx 0;
	}

	.nav-bar-item-oprice {
		font-size: 22rpx;
		font-weight: 500;
		color: #FF0018;
	}

	.nav-bar-item-pprice {
		padding-left: 10rpx;
		font-size: 18rpx;
		color: #B3B3B3;
		text-decoration: line-through;
	}

	.nav-bar-item-type {
		font-size: 21rpx;
		color: #7B7B7B;
	}

	.nav-bar-item-pricetxt {
		font-size: 19rpx;
		color: #FF6464;
	}

	.re-lo {
		padding: 14rpx;
	}
</style>